<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钩子函数-拖动</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .imgSrc{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div id="case11-demo6">
    <img v-drag src="../images/timg.jpg"   class="imgSrc"/></div>
</body>
<script type="text/javascript">
    //vue 自定义指令 拖拽
    Vue.directive('drag',{
        inserted(el,binding) {
        el.style.height="200px"
            el.onmousedown=function (e) {
               //鼠标按下,计算当前元素距离可视区
               let disX=e.clientX-el.offsetLeft;
               let disY=e.clientY-el.offsetTop;
               console.log(disX)
               document.onmousemove=function (e) {
                   //获取到鼠标拖拽后的横向位移（距离父级元素）
                   let l=e.clientX-disX;
                   //获取到鼠标拖拽后的纵向位移（距离父元素）
                   let t=e.clientY-disY;

                   el.style.left=l+"px";
                   el.style.top=t+"px";
               }

                document.onmouseup  =function (e) {
                    document.onmousemove =null
                    document.onmouseup =null
                }
           }
    }
    })
    var case11Demo=new Vue({
        el:"#case11-demo6"
    })
</script>
</html>